import React from 'react';
import { connect } from 'dva';
import styles from './IndexPage.css';
import { Drawer, List, NavBar,Icon, InputItem, WhiteSpace ,Picker, TabBar } from 'antd-mobile';
import { createForm } from 'rc-form'
import style from '../style/App.less'
const seasons = [
  [
    {
      label: '2013',
      value: '2013',
    },
    {
      label: '2014',
      value: '2014',
    },
  ],
  [
    {
      label: '春',
      value: '春',
    },
    {
      label: '夏',
      value: '夏',
    },
  ],
];
class App1 extends React.Component {
  state = {
    open: false,
    position: 'left',
     focused: false,
    focused1: false,
    sValue:['2013', '春'],
  }
  onOpenChange = (...args) => {
    console.log(args);
    this.setState({ open: !this.state.open });
  }
  render() {
    const { getFieldProps } = this.props.form;
    const sidebar = (<List>
      {[...Array(20).keys()].map((i, index) => {
        if (index === 0) {
          return (<List.Item key={index}
            thumb="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
            multipleLine
          >Category</List.Item>);
        }
        return (<List.Item key={index}
          thumb="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
        >Category{index}</List.Item>);
      })}
    </List>);

    const drawerProps = {
      open: this.state.open,
      position: this.state.position,
      onOpenChange: this.onOpenChange,
    };
    return (
      <div className="flex-container">
       <div className={`${style.sub_title}`}>基本</div>
        <Picker
          data={seasons}
          title="选择季节"
          cascade={false}
          extra="请选择(可选)"
          value={this.state.sValue}
          onChange={v => this.setState({ sValue: v })}
        >
          <List.Item arrow="horizontal">选择季节（多列，不联动）</List.Item>
        </Picker> 
        <List renderHeader={() => 'Customize to focus'}>
          <InputItem
            {...getFieldProps('autofocus')}
            clear
            placeholder="auto focus in Alipay client"
            autoFocus
          >标题</InputItem>
          <InputItem
            {...getFieldProps('focus')}
            clear
            placeholder="click the button below to focus"
            focused={this.state.focused}
            onFocus={() => {
              this.setState({
                focused: false,
              });
            }}
          >标题</InputItem>
          <List.Item>
            <div
              style={{ width: '100%', color: '#108ee9', textAlign: 'center' }}
              onClick={() => {
                this.setState({
                  focused: true,
                });
              }}
            >
          click to focus
        </div>
          </List.Item>
        </List>
        <List renderHeader={() => 'Whether is controlled'}>
          <InputItem
            {...getFieldProps('control')}
            placeholder="Hello World"
          >受控组件</InputItem>
          <InputItem
            placeholder="please input content"
            data-seed="logId"
          >非受控组件</InputItem>
        </List>
        <WhiteSpace />
        <List renderHeader={() => 'click label to focus input'}>
          <InputItem
            placeholder="click label to focus input"
            focused={this.state.focused1}
            onFocus={() => {
              this.setState({
                focused1: false,
              });
            }}
          ><div onClick={() => this.setState({ focused1: true })}>标题</div></InputItem>
        </List>
        <List renderHeader={() => 'Show clear icon'}>
          <InputItem
            {...getFieldProps('inputclear')}
            clear
            placeholder="displayed clear icon while typing"
          >标题</InputItem>
        </List>
        <WhiteSpace />
        <List renderHeader={() => 'Number of words for title'}>
          <InputItem
            {...getFieldProps('label8')}
            placeholder="limited title length"
            labelNumber={5}
          >标题过长超过默认的5个字</InputItem>
        </List>
        <WhiteSpace />
        <List renderHeader={() => 'Custom title（text / image / empty)'}>
          <InputItem
            {...getFieldProps('input3')}
            placeholder="no label"
          />
          <InputItem
            {...getFieldProps('inputtitle2')}
            placeholder="title can be icon，image or text"
          >
            <div style={{ backgroundImage: 'url(https://zos.alipayobjects.com/rmsportal/DfkJHaJGgMghpXdqNaKF.png)', backgroundSize: 'cover', height: '0.44rem', width: '0.44rem' }} />
          </InputItem>
        </List>
        <WhiteSpace />
        <List renderHeader={() => 'Customize the extra content in the right'}>
          <InputItem
            {...getFieldProps('preice')}
            placeholder="0.00"
            extra="¥"
          >价格</InputItem>
        </List>
        <WhiteSpace />
        <List renderHeader={() => 'Format'}>
          <InputItem
            {...getFieldProps('bankCard', {
              initialValue: '8888 8888 8888 8888',
            })}
            type="bankCard"
          >银行卡</InputItem>
          <InputItem
            {...getFieldProps('phone')}
            type="phone"
            placeholder="186 1234 1234"
          >手机号码</InputItem>
          <InputItem
            {...getFieldProps('password')}
            type="password"
            placeholder="****"
          >密码</InputItem>
          <InputItem
            {...getFieldProps('number')}
            type="number"
            placeholder="click to show number keyboard"
          >数字键盘</InputItem>
        </List>
        <WhiteSpace />
        <List renderHeader={() => 'Not editable / Disabled'}>
          <InputItem
            value="Not editable"
            editable={false}
          >姓名</InputItem>
          <InputItem
            value="style of disabled `InputItem`"
            disabled
          >姓名</InputItem>
        </List>

      </div>);
  }
}



const AppForm = createForm()(App1);

export default connect()(AppForm);
